<template>
    <view class="cashPage" :style="{'--color': color}">
        <status-bar title='提现'></status-bar>
        <view class="topBg bg00 p-re">
            <view class="card thmeBg padding40 p-ab white">
                <image :src="imgUrl + 'Uploads/User_img/shadingImg.png'" mode="aspectFill" class="wh p-ab"></image>
                <view class="note d-flex a-center p-ab" @click="toUrl('/moneyPage/capital/detail')">
                    <text class="iconfont icon-a-031"></text>
                    <text class="size26 m-left10">提现记录</text>
                </view>
                <view class="size26 m-bot20">可提现</view>
                <view class="size60">{{ pageData.money }}</view>
            </view>
        </view>
        <view class="p-left60 p-right60 m-top50">
            <view class="flexac m-bot20">
                <u-tabs :list="tabList" :lineColor="color" lineWidth="32" @click="tabClick" 
                    :inactiveStyle="{color:'#666',fontSize:'26rpx',transform:'scale(1)'}"
                    :activeStyle="{color:'#1E1E1E',fontSize:'26rpx',fontWeight:'bold',transform:'scale(1.2)'}"></u-tabs>
            </view>
            <!-- 银行卡 -->
            <view class="add_card padding30 color_22" v-if="!active && account.id" @click="handleAdd">
                <view class="size32 m-bot10">{{ account.bankName }}</view>
                <view class="size28">{{ account.userName }}（{{ account.bankCard }}）</view>
            </view>
            <!-- 微信/支付宝 -->
            <view class="add_card d-flex a-center color_22" v-else-if="active && account.id" @click="handleAdd">
                <image :src="$imgUrls(account.account_img)" mode="aspectFill" class="code"></image>
                <view>
                    <view class="size32 m-bot10">{{ account.bankCard }}</view>
                    <view class="size28">{{ account.userName }}（{{ account.phone }}）</view>
                </view>
            </view>
            <view class="add_card flexac f-column" @click="handleAdd" v-else>
                <image :src="staticUrl + '/images/plus_ico.png'" class="plus"></image>
                <view class="h6 color_99 m-top10">点击添加{{ active == 0 ? '银行卡' : '收款码' }}</view>
            </view>
            <view class="m-top30">
                <view class="size28 bold m-bot10">提现金额</view>
                <u-input v-model="money" placeholder="请填写提现金额" type="number" border="bottom" prefixIcon="rmb"
                    @change="handleChange">
                    <template slot="suffix">
                        <view class="size26 color_ff4" @click="handleAll">全部提现</view>
                    </template>
                </u-input>
                <view class="size26 color_66 m-top20">{{ tip }}</view>
            </view>
            <view class="btn flexac size32 white" :class="disabled ? 'bgCC' : 'thmeBg'" @click="withdraw">立即提现</view>
            <view v-if="withdrawal_rules">
                <view class="size28 bold m-bot20">到账说明</view>
                <view class="size28 color_33 m-bot20" v-for="(item,index) in withdrawal_rules" :key="index">{{ item }}</view>
            </view>
        </view>
    </view>
</template>

<script>
import {mapState} from 'vuex'
export default {
    data(){
        return {
            imgUrl: this.imgUrl,
            staticUrl: this.staticUrl,
            tabList: [
                { name: '到银行卡' },
                { name: '到微信' },
                { name: '到支付宝' }
            ],
            active: 0,
            money: '', // 提现金额
            pageData: '',
            account: '',
            withdrawal_rules: '',
            disabled: true,
            tip: '',
            fastClick: false
        }
    },
    computed: {
        ...mapState(['color','startUp'])
    },
    onLoad(){
        if(this.startUp.withdrawal_rules){ // 按"换行符"分割
            this.withdrawal_rules = this.startUp.withdrawal_rules.split('\n')
        }
    },
    onShow(){
        this.getBank()
    },
    methods: {
        tabClick({index}){
            this.active = index
            if (index == 0){
                this.account = this.pageData.toBank
            } else if(index == 1){
                this.account = this.pageData.toWx
            } else if(index == 2){
                this.account = this.pageData.toZfb
            }
        },
        handleAdd(){
            if (this.active == 0){
                this.toUrl('/moneyPage/capital/addBank')
            } else if(this.active == 1){
                this.toUrl('/joinPage/addCode?cash_method=4')
            } else if(this.active == 2){
                this.toUrl('/joinPage/addCode?cash_method=5')
            }
        },
        getBank(){
            this.$http.post({
                url: '/singleSaleApi/findBankCard'
            }).then(res=>{
                if(res.errcode != 100) return this.$Toast(res.msg)
                this.pageData = res.data
                this.tabClick({index: this.active})
                this.handleChange(this.money)
            })
        },
        handleAll(){ // 全部提现
            this.money = this.pageData.money
            this.handleChange(this.money)
        },
        handleChange(val){
            let all = parseFloat(this.pageData.money)
            let min = parseFloat(this.pageData.cash_min)
            let rate = parseFloat(this.pageData.cash_rate)
            if(val == 0 || !val){
                this.disabled = true
                this.tip = '当前账号可提现：￥' + all.toFixed(2)
                return
            }
            if(val < min){
                this.disabled = true
                this.tip = '最小提现金额：￥' + min.toFixed(2)
                return
            }
            if (val > all){
                this.disabled =  true
                this.tip = '输入金额超过可提现金额'
            } else{
                this.disabled = false
                this.tip = '到账扣除' + parseFloat(rate * val).toFixed(2) + '的服务费用（费率' + rate * 100 + '%）'
            }
        },
        withdraw(){ // 立即提现
            if(this.disabled) return
            if(this.account.id == 0 && !this.active) return this.$Toast('请添加银行卡')
            if(this.account.id == 0 && this.active) return this.$Toast('请添加收款码')
            if(this.fastClick) return
            this.fastClick = true
            this.$showLoading('正在发起提现申请')

            this.$http.post({
                url: '/singleSaleApi/CommissionWithdrawal',
                data: {
                    money: this.money,
                    bankCard: this.account.bankCard,
                    cash_method: this.account.cash_method
                }
            }).then(res=>{
                this.$hideLoading()
                this.fastClick = false
                if(res.errcode != 100) return this.$Toast(res.msg)
                this.money = ''
                this.disabled = true
                this.toUrl('/joinPage/withdrawSuccess?type=0&id=' + res.data)
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.cashPage {
    padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
}
.topBg {
    height: 200rpx;
    .card {
        width: 690rpx;
        height: 200rpx;
        left: 30rpx;
        top: 30rpx;
        z-index: 10;
        image {
            top: 0;
            left: 0;
            z-index: -1;
        }
        .note {
            right: 20rpx;
            top: 20rpx;
        }
    }
}
.add_card {
    height: 160rpx;
    border: 1px dashed #C0C0C0;
    border-radius: 8rpx;
    .plus {
        width: 60rpx;
        height: 60rpx;
        opacity: 0.6;
    }
    .code {
        width: 100rpx;
        height: 140rpx;
        padding: 0 30rpx;
    }
}
.btn {
    width: 300rpx;
    height: 80rpx;
    border-radius: 40rpx;
    margin: 60rpx auto;
}
</style>